<template>
  <div class="conn">
    <lay-card>
      <lay-form :pane="true" size="sm">
        <lay-form-item label="pdf文件" prop="username">
          <lay-input v-model="storeMain"></lay-input>
        </lay-form-item>
      </lay-form>
      <lay-button type="primary" fluid @click="handleClick">开发中....敬请关注</lay-button>
      <lay-progress :percent="storeMain" show-text :text="'进度'+storeMain" size="big"></lay-progress>
      <div class="listconn"></div>
    </lay-card>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useStoreMain} from '../../store/storeindex.js';
const storeMain = useStoreMain();

const handleClick = () => {
  storeMain.down.getPlist();
}
function handleShowInfo(cid,name) {

  storeMain.down.getDown(cid,name);

}
onMounted(() => {
  // storeMain.publicmain.ziyuanurl = $utilstoken.getStorage('ziyuanurl');
})
</script>
<style lang="scss" scoped>
.conn {
  padding: 10px;
  overflow-y: auto;
  .layui-progress{
    margin: 10px;
  }
  .listconn {
    width: 100%;
    margin: 0px auto;
    padding: 10px;
    height: calc(100vh - 225px);
    border: 1px solid #e0dddd;
    border-radius: 10px;
    overflow: hidden;
    overflow-y: auto;
    .list {
      position: relative;
      .list_item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 5px;
        border: 0px solid #000;
        &:hover {
          transform: scale(1.01);
        }
        .item_body {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          background-color: #fff;
          border: 0px solid #e1dfdf;
          overflow: hidden;
          .ziyuan {
            position: absolute;
            top: 3px;
            left: 5px;
            width: 80%;
            text-align: left;
            padding-left: 5px;
            line-height: 25px;
            border-radius: 5px;
            background-color: rgb(34 31 31 / 70%);
            color: #fff;
          }
          .type {
            position: absolute;
            top: 30px;
            left: 5px;
            width: 100px;
            text-align: left;
            padding-left: 5px;
            line-height: 25px;
            border-radius: 5px;
            background-color: rgb(34 31 31 / 70%);
            color: #fff;
          }
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
          }
          .info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgb(34 31 31 / 70%);
            //border: 1px solid #000;
            .name {
              height: 40px;
              //overflow: hidden;
              color: #fff;
            }
            .time {
              color: #dedbdb;
            }
          }
        }
      }
    }
    .page {
      border: 0px solid #000;
      margin: 10px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      text-align: center;
      z-index: 9;
      padding: 10px 15px 5px;
      border-radius: 10px;
      color: #3a3838;
      font-size: 18px;
      font-weight: 900;
      background-color: #fff;
    }
  }
}
</style>
